<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scooper gis plot 图形库</title>
    <script src="./lib/ol/ol6.4.3/ol.js"></script>
    <link rel='stylesheet' href='./css/ol6.4.3/ol.css'>
</head>
<body>
<div id='left-button-wrapper'>
    <div class='plot-action-wrapper'>
        <h5>标绘触发</h5>
        <ul>
            <li>
                <button id='createPlot'>创建标绘</button>
            </li>
            <li>
                <button id='sharePlot'>分享标绘</button>
            </li>
            <li>
                <button id='endPlot'>结束标绘</button>
            </li>
        </ul>
    </div>
    <div class='base-plot-wrapper'>
        <h5>基础标绘</h5>
        <ul>
            <li>
                <button id='freeHandLine' class='btn btn-success'>画笔</button>
            </li>
            <li>
                <button id='segmentLine' class='btn btn-success'>直线</button>
            </li>
            <li>
                <button id='polyline' class='btn btn-success'>折线</button>
            </li>
            <li>
                <button id='circle' class='btn btn-success'>圆形</button>
            </li>
            <li>
                <button id='rectangle' class='btn btn-success'>矩形</button>
            </li>
            <li>
                <button id='polygon' class='btn btn-success'>多边形</button>
            </li>
            <li>
                <button id='textArea' class='btn btn-success'>文本</button>
            </li>
        </ul>
    </div>
    <div class='flag-arrow-wrapper'>
        <h5>旗帜标箭</h5>
        <ul>
            <li>
                <button id='rectFlag' class='btn btn-success'>目标</button>
            </li>
            <li>
                <button id='triangleFlag' class='btn btn-success'>节点</button>
            </li>
            <li>
                <button id='doubleArrow' class='btn btn-success'>复杂路线</button>
            </li>
            <li>
                <button id='squadCombat' class='btn btn-success'>路线</button>
            </li>
            <li>
                <button id='fineArrow' class='btn btn-success'>突击方向</button>
            </li>
            <li>
                <button id='straightArrow' class='btn btn-success'>箭头</button>
            </li>
        </ul>
    </div>
    <div class='rescue-element-wrapper'>
        <h5>救援图标</h5>
        <ul>
            <li>
                <button data-id='point' data-type='rescue-team' class='btn btn-success'>救援队</button>
            </li>
            <li>
                <button data-id='point' data-type='evacuation-point' class='btn btn-success'>疏散点</button>
            </li>
            <li>
                <button data-id='point' data-type='material-point' class='btn btn-success'>物资点</button>
            </li>
            <li>
                <button data-id='point' data-type='medical-point' class='btn btn-success'>医疗点</button>
            </li>
            <li>
                <button data-id='point' data-type='assembly-point' class='btn btn-success'>集结点</button>
            </li>
            <li>
                <button data-id='point' data-type='blocking-point' class='btn btn-success'>封锁点</button>
            </li>
            <li>
                <button data-id='point' data-type='police-car' class='btn btn-success'>警车</button>
            </li>
            <li>
                <button data-id='point' data-type='truck' class='btn btn-success'>货车</button>
            </li>
            <li>
                <button data-id='point' data-type='ambulance' class='btn btn-success'>救护车</button>
            </li>
            <li>
                <button data-id='point' data-type='fire-engine' class='btn btn-success'>消防车</button>
            </li>
            <li>
                <button data-id='point' data-type='bus' class='btn btn-success'>巴士</button>
            </li>
            <li>
                <button data-id='point' data-type='UAV' class='btn btn-success'>无人机</button>
            </li>
        </ul>
    </div>
    <div class='important-element-wrapper'>
        <h5>重要目标</h5>
        <ul>
            <li>
                <button data-id='point' data-type='headquarters' class='btn btn-success'>指挥部</button>
            </li>
            <li>
                <button data-id='point' data-type='forefinger' class='btn btn-success'>前指</button>
            </li>
            <li>
                <button data-id='point' data-type='protrusion' class='btn btn-success'>前突</button>
            </li>
            <li>
                <button data-id='point' data-type='hospital' class='btn btn-success'>医院</button>
            </li>
            <li>
                <button data-id='point' data-type='school' class='btn btn-success'>学校</button>
            </li>
            <li>
                <button data-id='point' data-type='gas-station' class='btn btn-success'>加油站</button>
            </li>
            <li>
                <button data-id='point' data-type='dangerous' class='btn btn-success'>危化品</button>
            </li>
            <li>
                <button data-id='point' data-type='mountain' class='btn btn-success'>山洪</button>
            </li>
            <li>
                <button data-id='point' data-type='landslide' class='btn btn-success'>滑坡</button>
            </li>
        </ul>
    </div>
    <!--<ul id='btn-wrapper'>
        <li>
            <button id='curve' class='btn btn-success'>测试画曲线</button>
        </li>
        <li>
            <button id='arc' class='btn btn-success'>测试画弓形</button>
        </li>
        <li>
            <button id='ellipse' class='btn btn-success'>测试椭圆</button>
        </li>
        <li>
            <button id='lune' class='btn btn-success'>测试弓形</button>
        </li>
        <li>
            <button id='sector' class='btn btn-success'>测试画扇形</button>
        </li>
        <li>
            <button id='closedCurve' class='btn btn-success'>测试画闭合曲面</button>
        </li>
        <li>
            <button id='freePolygon' class='btn btn-success'>测试自由面</button>
        </li>
        <li>
            <button id='gatheringPlace' class='btn btn-success'>测试集结地</button>
        </li>
        <li>
            <button id='attackArrow' class='btn btn-success'>测试进攻方向</button>
        </li>
        <li>
            <button id='assaultDirection' class='btn btn-success'>测试粗单直箭头</button>
        </li>
        <li>
            <button id='tailedAttackArrow' class='btn btn-success'>测试进攻方向（尾）</button>
        </li>
        <li>
            <button id='tailedSquadCombat' class='btn btn-success'>测试分队战斗行动（尾）</button>
        </li>
        <li>
            <button id='curveFlag' class='btn btn-success'>测试曲线标志旗</button>
        </li>
        <li>
            <button id='getFeaturesBtn' class='btn btn-success'>获取标绘图层上的所有要素</button>
        </li>
    </ul>-->
</div>
<div id='map'></div>
</body>
</html>